<template>
  <div class="staff">
    <div class="company-top">
      <van-row gutter="20">
        <van-col span="20">
          <van-search
            v-model="searchResult"
            placeholder="智能匹配"
            @search="onSearch"
            @cancel="onCancel"
          >
          </van-search>
        </van-col>
        <van-col span="4">
          <select name="selectCity" class="selectCity">
            <option value="" class="option">长沙</option>
            <option value="">南京</option>
            <option value="">杭州</option>
            <option value="">宁波</option>
          </select>
        </van-col>
      </van-row>
    </div>
    <div class="button">
      <van-button
        class="button1"
        round
        type="info"
        v-for="(item, index) in prof"
        :key="index"
        @click="btnOK(item)"
      >
        {{ item }}
      </van-button>
      <van-button round type="info" class="button1" @click="popFn"
        >查看全部</van-button
      >
    </div>
    <div class="bg"></div>
    <!-- v-if="searchResult.length > 0" -->

    <div v-if="searchResult.length > 0">
      <div class="staff" v-for="item in list" :key="item.id">
        <img :src="item.pic" alt="" class="left" />
        <div class="right">
          <div class="info">
            <span class="name">{{ item.name }}</span>
            <div class="price">{{ item.salary }}</div>
          </div>
          <div class="tag">
            <van-button
              class="tag"
              round
              type="info"
              v-for="(item1, index) in item.tag"
              :key="index"
              >{{ item1 }}</van-button
            >
          </div>
          <div class="staffInfo">
            <span v-for="(item1, index) in item.detail" :key="index">{{
              item1
            }}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="staff"
      v-for="item in list"
      :key="item.id"
      @click="$router.push(`/staff/${item.id}`)"
    >
      <img :src="item.pic" alt="" class="left" />
      <div class="right">
        <!-- <van-row class="info">
          <van-col span="10" class="name">张丽丽</van-col>
          <van-col span="14" class="price">80000元/26天</van-col>
        </van-row> -->
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <div class="price">{{ item.salary }}</div>
        </div>
        <div class="tag">
          <van-button
            class="tag"
            round
            type="info"
            v-for="(item1, index) in item.tag"
            :key="index"
            >{{ item1 }}</van-button
          >
        </div>
        <div class="staffInfo">
          <span v-for="(item1, index) in item.detail" :key="index">{{
            item1
          }}</span>
        </div>
      </div>
    </div>
    <van-popup
      v-model="pop"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '75%' }"
    >
      <IntelligentMatch :staffInfo="list"></IntelligentMatch>
    </van-popup>
    <!-- </div> -->
  </div>
</template>

<script>
import { staffInfo } from '@/api/staff'
import IntelligentMatch from './components/intelligentMatch.vue'
export default {
  components: {
    IntelligentMatch,
  },
  data() {
    return {
      searchResult: '', //搜索结果
      list: [],
      business: [],
      prof: [], //职业
      show: true,
      pop: false,
    }
  },
  created() {
    this.staffInfo()
  },
  methods: {
    async onSearch(val) {
      this.$toast(val)
      // this.prof.before(this.searchResult)
      if (this.searchResult.trim() !== '') {
        this.prof = [this.searchResult, ...this.prof]
        localStorage.setItem('PROF', JSON.stringify(this.prof))
      } else {
        this.$toast.fail('输入不能为空')
      }
    },
    // change(searchResult) {
    //   console.log(searchResult)
    // },
    onCancel() {
      this.searchResult = ''
      this.$toast('取消')
    },
    //获取家政人员信息
    async staffInfo() {
      const res = await staffInfo()
      this.list = res.data
      // console.log(res.data[0].prof)
      const data = JSON.parse(localStorage.getItem('PROF') || '[]')
      if (data.length > 0) {
        this.prof = data
      } else {
        this.prof = res.data[0].prof
      }
      // console.log(this.prof)
    },
    btnOK(prof) {
      // console.log(prof)
      this.searchResult = prof
    },
    popFn() {
      this.pop = true
    },
  },
}
</script>

<style scoped lang="less">
.staff {
  .company-top {
    background-color: rgba(63, 81, 181, 100);
    .van-search {
      margin: 22px 64px 19px 16px;
      width: 590px;
      height: 70px;
      border-radius: 10px 10px 10px 10px;
      background-color: rgba(247, 248, 250);
      text-align: center;
    }
    .selectCity {
      background-color: rgba(63, 81, 181, 100);
      border: 0ch;
      color: #fff;
      margin-top: 40px;
      .option {
        background-color: #fff;
      }
    }
  }
  .button {
    .button1 {
      // margin-top: 10px;
      margin-left: 20px;
      height: 52px;
      border: 1px solid rgba(151, 145, 145, 100);
      color: rgba(151, 145, 145, 100);
      background-color: #fff;
    }
  }
  .bg {
    background-color: rgba(249, 245, 245, 100);
    height: 20px;
    margin-top: 20px;
  }
  .staff {
    width: 85%;
    margin: 0 auto;
    display: flex;
    padding: 36px 0 36px 36px;
    border-bottom: 1px solid rgba(240, 238, 238, 100);
    .left {
      width: 160px;
      height: 160px;
      background-color: pink;
    }
    .right {
      // width: 580px;
      line-height: 50px;
      .info {
        word-break: keep-all;
        white-space: nowrap;
        flex: 1;
        .name {
          font-size: 28px;
          margin-left: 20px;
        }
        .price {
          margin-top: 10px;
          float: right;
          font-size: 26px;
          color: rgba(151, 145, 145, 100);
        }
      }
      .tag {
        display: flex;
        // width: 100%;
        .van-button {
          height: 46px;
          color: rgba(63, 81, 181, 100);
          background-color: #fff;
          margin-left: 20px;
          font-size: 20px;
          word-break: keep-all;
          white-space: nowrap;
        }
      }
      .staffInfo {
        color: rgba(151, 145, 145, 100);
        font-size: 24px;
        span {
          padding-right: 10px;
          margin-left: 20px;
          border-right: 1px solid rgba(151, 145, 145, 100);
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
